<template>
  <div class="search_tablist">
    <div class="tabs_list">
      <div class="tabs_list_tab">
        <van-tabs>
          <van-tab
            v-for="index in [
              '综合',
              '资讯',
              '视频',
              '图文',
              '小视频',
              '问答',
              '直播',
            ]"
            :title="index"
            :key="index"
          />
        </van-tabs>
        <div></div>
      </div>
    </div>

    <van-list
      v-model="loaded"
      :finished="finish"
      finished-text="没有更多了"
      :immediate-check="false"
      @load="UpdateSearch"
    >

    <van-skeleton title avatar :row="4" :loading="!searchList[0]">
   <div class="content_list">
        <ArticeleInfo
          v-for="item in searchList"
          :time="item.time"
          :img="item.imageSrc"
          :amcount="item.fav"
          :title="item.title"
          :key="item._id"
          :author="item.author"
          :id="item._id"
        ></ArticeleInfo>
      </div>
</van-skeleton>
     
    </van-list>
  </div>
</template>

<script>
import { mapState } from "vuex";
import ArticeleInfo from "@/views/home/ArticeleInfo.vue";

export default {
  name: "SearchList",
  components: {
    ArticeleInfo,
  },
  props: {
    finished: {
      type: Boolean,
      default: false,
    },
    loading: {
      type: Boolean,
      default: false,
    },
  },
  watch: {
    loaded(n) {
      // console.log(n);
      this.$emit("update:loading", n);
    },
  },
  data() {
    return {
      // loaded:this.loading
    };
  },
  computed: {
    ...mapState(["searchList"]),
    finish() {
      return this.finished;
    },
    loaded: {
      get() {
        return this.loading;
      },
      set(e) {},
    },
  },
  methods: {
    UpdateSearch() {
      this.$emit("updateSearch");
    },
  },
};
</script>


<style lang="less" scoped>
.tabs_list {
  margin-top: 50px;
  position: fixed;
  left: 0;
  top: 0;
  height: 59px;
  width: 375px;
  z-index: 998;
  .tabs_list_tab{
    display: flex;
  }
}
.search_tablist {
  margin-top: 55px;
}
.content_list {
  margin-top: 92px;
}
</style>